<!-- $lib/components/Menu/Common/MenuLeafItem.svelte -->
 <!-- 叶子项 -->
<script lang="ts">
	import Icon from '$lib/components/Basic/Icon/Icon.svelte';
	import type { Option } from '$lib/components/Basic/Popover/types';

	const { item, level, label = 'label', selectedLeafId, onItemClick, isCollapsed = false } = $props<{
		item: Option;
		level: number;
		label?: string;
		selectedLeafId: string | number | null;
		onItemClick: (item: Option, e: MouseEvent) => void;
		isCollapsed?: boolean;
	}>();

	// 层级缩进样式（公共逻辑）
	const getLevelIndent = (level: number) => `${10 + (level - 1) * 10}px`;

	// 菜单名称样式（适配收缩状态）
	const getMenuItemNameStyle = () => {
		if (!isCollapsed) return '';
		return 'opacity: 0; width: 0; overflow: hidden; transition: opacity 0.3s ease, width 0.3s ease; transition-delay: 0.2s;';
	};

	// 叶子节点激活状态（非折叠时生效）
	const isActive = $derived(
		!isCollapsed && selectedLeafId === item.id
	);
</script>

<div
	class={`menu-item ${isActive ? 'active' : ''}`}
	onclick={(e) => onItemClick(item, e)}
	onkeydown={(e) => {
		if (e.key === 'Enter' || e.key === ' ') {
			e.preventDefault();
			onItemClick(item, e);
		}
	}}
	role="button"
	tabindex="0"
	data-item-id={item.id}
>
	<div class="menu-item__header">
		<div style={`padding-left: ${getLevelIndent(level)}; display: flex; align-items: center; flex: 1; overflow: hidden;`}>
			<Icon src={item.iconName ? item.iconName : 'weather/moon'} size="15" />
			<span class="menu-item__name" style={getMenuItemNameStyle()}>
				{item[label]}
			</span>
		</div>
	</div>
</div>

<style scoped lang="scss">
	.menu-item {
		width: 100%;
		border-radius: 4px;
		overflow: hidden;
		cursor: pointer;
		margin-bottom: 3px;
		padding-right: 5px;
		&:hover {
			background-color: var(--color-fill);
		}

		&:last-child {
			margin-bottom: 0;
		}

		&.active {
			background-color: color-mix(in srgb, var(--color-primary-500) 20%, transparent);			
			color: var(--color-primary-500);
		}
		
	}

	.menu-item__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 38px;
		border-radius: 4px;
		transition: background-color 0.2s;
		width: 100%;
		box-sizing: border-box;
		cursor: pointer;
	}

	.menu-item__name {
		font-size: 13px;
		line-height: 15px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-left: 6px;
		flex: 1;
		transition: color 0.2s ease;
		text-align: left;
	}
</style>